<template>
  <div class="index">
    <Header></Header>
    <div class="main">
      <p class="current-nav">
        当前位置 :
        <router-link to="index">首页</router-link>
        <i>></i>
        <a>应急预案备案</a>
        <i>></i>备案申请
      </p>
      <div class="infor application" style="margin-bottom:0;">
        <p class="tishi">
          <img
            src="../../../static/images/sound.png"
          />提示信息：若您需要线上查询备案进度，请登录“电力安全生产公共服务平台（电力应急预案备案系统）”进行查询
        </p>
        <ul class="clearfix steps" style=" padding-top:20px;">
          <li class="steps-active" @click="goToPage(0)">
            <span>1</span>
            <p>备案材料</p>
            <p class="info_note clearfix">
              <i class="el-icon-warning-outline"></i>
              <span
              >请先<strong>导出</strong>所需备案材料，便于备案申请时提交</span
              >
            </p>
          </li>
          <li class="steps-active" @click="goToPage(1)">
            <span>2</span>
            <p>备案申请</p>
            <p class="info_note clearfix">
              <i class="el-icon-warning-outline"></i>
              <span
              >将备案申请表填好后，<strong>保存</strong>并<strong>导出</strong>，进行线下备案，线上备案正在开发中</span
              >
            </p>
          </li>
          <!-- <li>
              <span>3</span>
              <p>备案信息查询</p>
              <p class="info_note clearfix">
                  <i class="el-icon-warning-outline"></i>
                  <span>线上备案5个工作日后，可查看备案结果</span>
              </p>
          </li> -->
        </ul>
        <div class="form-container">
          <h2 class="filing_tit">电力企业应急预案备案申请表</h2>
          <div class="bts clearfix">
            <el-button
              type="primary"
              plain
              class="detail-btn"
              @click="uploadDetail('ruleForm')"
            ><i class="el-icon-upload2">导出</i></el-button
            >
            <el-button
              type="primary"
              plain
              class="detail-btn"
              @click="sendRecord('ruleForm')"
            >备案
            </el-button
            >
            <!-- <el-button @click="submitForm('ruleForm',1)" class="gray" style="float:right;">发送</el-button> -->
            <el-button
              @click="submitForm('ruleForm', 0)"
              class="sure"
              style="float:right;"
            >保存
            </el-button
            >
          </div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            z
            ref="ruleForm"
            label-width="145px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="申请单位 :"
                  prop="companyName"
                >
                  <el-input
                    v-model="ruleForm.companyName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="法定代表人 :"
                  prop="legalPerson"
                >
                  <el-input
                    disabled
                    v-model="ruleForm.legalPerson"
                    maxlength="20"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系人 :" prop="contacter">
                  <el-input
                    v-model="ruleForm.contacter"
                    maxlength="20"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="联系电话 :"
                  prop="contactInfo"
                >
                  <el-input
                    v-model="ruleForm.contactInfo"
                    maxlength="20"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="传真 :" prop="fax">
                  <el-input
                    v-model="ruleForm.fax"
                    maxlength="20"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="邮政编码 :"
                  prop="postCode"
                >
                  <el-input
                    v-model="ruleForm.postCode"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="单位地址 :" prop="address">
                  <el-input
                    v-model="ruleForm.address"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="电子邮箱 :" prop="email">
                  <el-input
                    disabled
                    v-model="ruleForm.email"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="应急预案编写人员 :"
                  prop="planCreateUser"
                >
                  <el-input
                    type="textarea"
                    v-model="ruleForm.planCreateUser"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="编制日期 :"
                  prop="planCreateTime"
                >
                  <el-date-picker
                    v-model="ruleForm.planCreateTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="桌面演练情况 :"
                  prop="planMark"
                >
                  <el-input
                    v-model="ruleForm.planMark"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="应急预案评审人员 :"
                  prop="planReviewSpecial"
                >
                  <el-input
                    disabled
                    v-model="ruleForm.planReviewSpecial"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="评审日期 :"
                  prop="planReviewTime"
                >
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="ruleForm.planReviewTime"
                    type="date"
                    placeholder=""
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="签署印发日期 :"
                  prop="planIssuingTime"
                >
                  <el-date-picker
                    v-model="ruleForm.planIssuingTime"
                    type="date"
                    placeholder="修订完善签署印发日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="预案签署人 :"
                  prop="planSigner"
                >
                  <el-input
                    v-model="ruleForm.planSigner"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="待备案预案名称 :"
                  prop="applyPlanName"
                >
                  <el-input
                    type="textarea"
                    v-model="ruleForm.applyPlanName"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="( 单位盖章 ) 日期 :"
                  prop="sealTime"
                >
                  <el-date-picker
                    v-model="ruleForm.sealTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
  import Header from "../common/header";
  import Footer from "../common/footer";

  export default {
    components: {
      Header,
      Footer
    },
    data() {
      var checkTelephone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("传真号不能为空"));
        } else {
          const reg1 = /^(?:\d{3,4}-)?\d{7,8}(?:-\d{1,6})?$/
          if (reg1.test(value)) {
            callback();
          } else {
            return callback(new Error("请输入正确的传真号"));
          }
        }
      };
      var checkPostCode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("邮编不能为空"));
        } else {
          const reg1 = /^[0-9]{6}$/;
          if (reg1.test(value)) {
            callback();
          } else {
            return callback(new Error("请输入正确的邮编"));
          }
        }
      };
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
          }
        },
        ruleForm: {
          companyId: "", //单位id
          companyName: "", //申请单位
          legalPerson: "", //法定代表人
          contacter: "", //联系人
          contactInfo: "", //联系电话
          fax: "",//传真
          postCode: '',//邮政编码
          address: '',//单位地址
          email: '',//电子邮箱
          planCreateUser: '',//应急预案编写人员
          planCreateTime: '',//编制日期
          planMark: '',//桌面演练情况
          planReviewSpecial: '',//应急预案评审人员
          planReviewTime: '',//评审日期
          planIssuingTime: '',//签署印发日期
          applyPlanName: '',//待备案预案名称
          sealTime: '',//单位盖章日期,
          planSigner: ''//签署人
        },
        rules: {
          companyName: [
            {
              required: true,
              message: "请输入申请单位",
              trigger: "blur"
            }
          ],
          legalPerson: [
            {
              required: true,
              message: "请输入法定代表人",
              trigger: "blur"
            }
          ],
          contacter: [
            {
              required: true,
              message: "请输入联系人",
              trigger: "blur"
            }
          ],
          contactInfo: [
            {
              required: true,
              message: "请输入联系电话",
              trigger: "blur"
            }
          ],
          fax: [
            {
              required: true,
              message: "请填写传真号码",
              trigger: "blur"
            },
            {
              required: true,
              validator: checkTelephone,
              message: "请输入正确的传真号码",
              trigger: "blur"
            }
          ],
          postCode: [
            {
              required: true,
              message: "请输入邮政编码",
              trigger: "blur"
            },
            {
              required: true,
              validator: checkPostCode,
              message: "请输入正确的邮政编码",
              trigger: "blur"
            }
          ],
          address: [
            {
              required: true,
              message: "请填写单位地址",
              trigger: "blur"
            }
          ],
          email: [
            {
              required: true,
              message: "请输入电子邮箱",
              trigger: "blur"
            }
          ],
          planCreateUser: [
            {
              required: true,
              message: "请填写应急预案编写人员",
              trigger: "blur"
            }
          ],
          planCreateTime: [
            {
              required: true,
              message: "请选择编制日期",
              trigger: "blur"
            }
          ],
          planMark: [
            {
              required: true,
              message: "请输入桌面演练情况",
              trigger: "blur"
            }
          ],
          planReviewSpecial: [
            {
              required: true,
              message: "应急预案评审人员未选择",
              trigger: "blur"
            }
          ],
          planReviewTime: [
            {
              required: true,
              message: "请选择评审日期",
              trigger: "blur"
            }
          ],
          planIssuingTime: [
            {
              required: true,
              message: "请选择签署印发日期",
              trigger: "blur"
            }
          ],
          applyPlanName: [
            {
              required: true,
              message: "请输入待备案预案名称",
              trigger: "blur"
            }
          ],
          sealTime: [
            {
              required: true,
              message: "请选择单位盖章日期",
              trigger: "blur"
            }
          ],
          planSigner: [
            {
              required: true,
              message: "请输入预案签署人",
              trigger: "blur"
            }
          ],
        },
        varCode: "",
        changeList: false,
        navChildren: []
      };

    },
    created() {
      this.lookcompany()
      this.navChildren = JSON.parse(this.$route.query.navChildren)
    },
    methods: {
      goToPage(index) {
        this.$router.push({
          path: this.navChildren[index].menuUrl,
          query: {
            navIndex: this.$route.query.navIndex,
            navChildren: this.$route.query.navChildren
          }
        })
      },
      submitForm(formName, n) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              companyId: JSON.parse(localStorage.getItem("user"))
                .companyId,
              companyName: this.ruleForm.companyName,
              legalPerson: this.ruleForm.legalPerson,
              contacter: this.ruleForm.contacter,
              contactInfo: this.ruleForm.contactInfo,
              fax: this.ruleForm.fax,
              businessName: this.ruleForm.businessName,
              totalAssets: this.ruleForm.totalAssets,
              peopleNumber: this.ruleForm.peopleNumber,
              email: this.ruleForm.email,
              postCode: this.ruleForm.postCode,
              address: this.ruleForm.address,
              applyPlanName: this.ruleForm.applyPlanName,
              sealTime: this.ruleForm.sealTime,
              planMark: this.ruleForm.planMark,
              planCreateUser: this.ruleForm.planCreateUser,
              planReviewTime: this.ruleForm.planReviewTime,
              planIssuingTime: this.ruleForm.planIssuingTime,
              userName: JSON.parse(localStorage.getItem("user")).userAccount,
              planCreateTime: this.ruleForm.planCreateTime,
              planSigner: this.ruleForm.planSigner,
              planReviewSpecial: this.ruleForm.planReviewSpecial
            };
            this.$axios({
              method: "post",
              url: this.$baseUrl + "emergency/v1.0/plan/record/add",
              data: params
            }).then(res => {
              let data = res.data.meta;
              if (data.success) {
                this.$message({
                  message: "保存成功",
                  type: "success"
                });
                // if (n == 1) {
                //     this.$router.push({
                //         path:"risk2",
                //         query:{
                //             navIndex:1
                //         }
                //     });
                // }
              } else {
                this.$message({
                  message: res.data.meta.msg,
                  type: "error"
                });
              }
            });
          }
        })
      },
      uploadDetail(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              companyId: JSON.parse(localStorage.getItem("user"))
                .companyId,
              businessId: localStorage.businessId,
              companyName: this.ruleForm.companyName,
              legalPerson: this.ruleForm.legalPerson,
              contacter: this.ruleForm.contacter,
              contactInfo: this.ruleForm.contactInfo,
              fax: this.ruleForm.fax,
              businessName: this.ruleForm.businessName,
              totalAssets: this.ruleForm.totalAssets,
              peopleNumber: this.ruleForm.peopleNumber,
              email: this.ruleForm.email,
              postCode: this.ruleForm.postCode,
              address: this.ruleForm.address,
              applyPlanName: this.ruleForm.applyPlanName,
              sealTime: this.ruleForm.sealTime,
              planMark: this.ruleForm.planMark,
              planCreateUser: this.ruleForm.planCreateUser,
              planReviewSpecial: this.ruleForm.planReviewSpecial,
              planReviewTime: this.ruleForm.planReviewTime,
              planIssuingTime: this.ruleForm.planIssuingTime,
              planCreateTime: this.ruleForm.planCreateTime,
              planSigner: this.ruleForm.planSigner,
            };
            this.$axios({
              method: "post",
              url: this.$baseUrl + "emergency/v1.0/plan/record/export",
              data: params
            }).then(res => {
              let data = res.data.meta;
              if (data.success) {
                var timestamp = Date.parse(new Date());
                var browserIsIe = this.browserIsIe();
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = res.data.data
                save_link.download = timestamp;
                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
                return false;
              } else {
                this.$message({
                  message: res.data.meta.msg,
                  type: "error"
                });
              }
            });
          }
        })
      },
      browserIsIe() {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
          return true;
        }
        else {
          return false;
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      lookcompany() {
        this.$axios({
          method: "get",
          url: this.$baseUrl + "emergency/v1.0/plan/record/" + JSON.parse(localStorage.getItem("user")).companyId
        }).then(res => {
          let data = res.data.data;
          this.ruleForm = data;
        });
      },
      /*****备案******/
      sendRecord(formName) {
        let url =
          this.$baseUrl +
          "/emergency/v1.0/plan/isable/checked/" + JSON.parse(localStorage.getItem("user")).companyId;
        this.$axios.get(url).then(res => {
          if (res.data.meta.success) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let params = {
                  userId: localStorage.userid,
                };
                this.$axios({
                  method: "POST",
                  url: this.$baseUrl + "emergency/v1.0/personal/info",
                  data: params
                }).then(res => {
                  let data = res.data.meta;
                  if (data.success) {
                    let param = res.data.data
                    if (param.companyInfo.address == null || param.companyInfo.address == '') {
                      this.$message({
                        message: '请先保存数据',
                        type: "warning"
                      });
                      return;
                    }
                    //备案系统免登陆接口
                    var str = {
                      linktelephone: param.mobileNo,//手机号
                      ComName: param.companyInfo.companyName,//企业名称
                      legalrepresentative: param.companyInfo.legalPerson,//主要负责人
                      linkman: param.companyInfo.contacter,//联系人
                      comemail: param.companyInfo.email,//电子邮箱
                      zipcode: param.companyInfo.postCode, //邮政编码(不是必填)
                      provincecode: param.companyInfo.provinceId,//所属区域省编码
                      citycode: param.companyInfo.cityId,//所属区域市编码
                      dictcode: param.companyInfo.areaId,//所属区域区编码
                      provincecitydict: param.companyInfo.provinceName + param.companyInfo.cityName + param.companyInfo.areaName,//完整所属区域地址中文
                      comaddress: param.companyInfo.address,//详细地址
                      comaccount: param.userAccount,
                    }
                    var obj = {
                      fax: param.companyInfo.fax,//传真
                      editor: param.planRecordInfo.planCreateUser,//预案编写人
                      editdate: param.planRecordInfo.planCreateTime,//预案编写日期
                      isdesktopdemo: param.planRecordInfo.planMark,//桌面演练情况
                      insitspecilist: param.planRecordInfo.planReviewSpecial,//预案评审专家
                      insitdate: param.planRecordInfo.planReviewTime,//预案评审日期
                      printdate: param.planRecordInfo.planIssuingTime,//预案印发日期
                      checkman: param.planRecordInfo.planSigner,//预案签署人
                      institution: param.planRecordInfo.applyPlanName,//申请内容
                    }
                    var arr = new Array();
                    if (param.companyInfo.specialBusinessname != null) {
                      var arr = param.companyInfo.specialBusinessname.split(',');
                      for (var i = 0; i < arr.length; i++) {
                        if (i == 0) {
                          str['comtype'] = arr[i];
                        }
                        if (i == 1) {
                          str['comtypeo'] = arr[i];
                        }
                        if (i == 2) {
                          str['comtypet'] = arr[i];
                        }
                      }
                    }
                    var formData = new FormData();
                    formData.append("pMode", "Login");
                    formData.append("Data", JSON.stringify(str))
                    formData.append("Entity", JSON.stringify(obj))
                    this.$axios({
                      method: "POST",
                      url: this.$baseUrl4 + "EHTMS_dl/api/index.ashx",
                      data: formData,
                    }).then(res => {
                      if (res.data.code != 0) {
                        this.$message({
                          message: "备案失败，请联系管理员",
                          type: "error"
                        });
                      } else {
                        window.open(this.$baseUrl4 + 'EHTMS_dl/api/index.ashx?ticketid=' + res.data.tickt);
                      }
                    })

                  } else {
                    this.$message({
                      message: res.data.meta.msg,
                      type: "error"
                    });
                  }
                });
              }
            })
            return;
          } else {
            this.$message({
              message: "暂时不能备案",
              type: "warning"
            });
            return;
          }
        }).catch((e) => {
          this.$message({
            message: e.message,
            type: "warning"
          });
        })


      },
      getCheck() {
        let url =
          this.$baseUrl +
          "/emergency/v1.0/plan/isable/checked/" + JSON.parse(localStorage.getItem("user")).companyId;
        this.$axios.get(url).then(res => {
          if (res.data.meta.success) {
            debugger
            return res.data.meta.success;
          } else {
            this.$message.warning(res.data.meta.message);
            return res.data.meta.success;
          }
        })
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import "../../../static/css/information.less";

  .application {
    .form-container {
      width: 900px;
      padding: 50px 0 70px;
      margin: 0 auto;
      .filing_tit {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
      }
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
      .el-button {
        width: 136px;
        height: 42px;
      }
      .el-textarea {
        .el-textarea__inner {
          resize: none;
          height: 200px;
          border-radius: 8px;
        }
      }
      .el-select {
        .el-input {
          width: 176px;
        }
        margin-right: 20px;
      }
      .el-select:last-child {
        margin: 0;
      }
      .chose_btn {
        height: 36px;
        margin-bottom: 20px;
        position: relative;
        input:first-child {
          width: 424px;
          height: 42px;
          text-indent: 10px;
          border: 1px solid #dddddd;
          border-radius: 8px;
          color: #cccccc;
          float: left;
          margin-right: 12px;
        }
        input:first-child::placeholder {
          color: #cccccc;
        }
        p {
          position: absolute;
          top: 40px;
        }
        .select_btn {
          float: right;
          text-align: center;
          color: #7254e8;
          width: 86px;
          font-size: 12px;
          border: 1px solid #2476fe;
          height: 44px;
          overflow: hidden;
          border-radius: 8px;
          margin-right: 60px;
          input {
            position: absolute;
            top: 0;
            left: 412px;
          }
        }
        .el-button {
          width: 86px;
          border: 0;
        }
      }
      .bts {
        width: 100%;
        .gray {
          background: #ccc;
          border: none;
          color: #fff;
        }
      }
    }
    .el-button.sure {
      color: #fff;
      width: 120px;
      height: 36px;
      background: #4080ff;
    }
    .el-button.sure:hover {
      opacity: 0.8;
    }
  }
</style>
<style scoped>
  .application .tishi {
    padding-left: 20px;
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }

  .application .tishi img {
    width: 26px;
    height: 26px;
    margin-right: 5px;
  }
</style>
